<template>
    <view class="page-account-pwd">
        <view class="mx-4">
            <u-form borderBottom :label-width="150" :model="form">
                <u-form-item label="原密码" borderBottom>
                    <u-input v-model="form.oldPassword" type="password" placeholder="请输入原来的密码"></u-input>
                </u-form-item>
                <u-form-item label="新密码" :borderBottom="true">
                    <u-input v-model="form.password" type="password" placeholder="请输入新的密码"></u-input>
                </u-form-item>
                <u-form-item label="确认密码" borderBottom>
                    <u-input v-model="form.newpassword" type="password" placeholder="再次输入新的密码"></u-input>
                </u-form-item>
            </u-form>
            <view class="mt-4">
                <u-button type="primary" shape="circle" :loading="btnLoading" @click="submitForm"> 确定 </u-button>
            </view>     
        </view>   
    </view>
</template>
<script setup lang="ts">
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
import { reactive, ref, computed } from 'vue'
let btnLoading = ref(false);
const form = reactive<any>({
    oldPassword: '',
    password: '',
    newpassword: ''
});
const verifyForm = () => {
    if(!proxy.$verify.len(form.password,6, '新密码不能少于6位字符或数字')){
        return false;
    }
    if(!proxy.$verify.same(form.password,form.newpassword, '两次输入的新密码不一致')){
        return false;
    }
    return true;
};
const submitForm = () => {
    if(!verifyForm()){
        return;
    }
    btnLoading.value = true;
    proxy.$http('put', '/app/appuser/edit', form, (data,msg) => {
        btnLoading.value = false;
        uni.$u.toast('修改成功');
        setTimeout(() => {
            uni.navigateBack()
        }, 1000)
    },msg => {
        btnLoading.value = false;
    })
}
</script>